import { useImperativeHandle, useState } from 'react'
import { IAction, IModalProp } from '../../../types/modal'
import { Role } from '../../../types/api'
import { Form, Input, message, Modal } from 'antd'
import { useForm } from 'antd/es/form/Form'
import api from '../../../api/roleApi'
// import mockData from '../../../../mock/deptList.json'
export default function CreateRole(props: IModalProp<Role.RoleItem>) {
  const [form] = useForm()
  const [action, setAction] = useState<IAction>('create')
  const [visible, setVisible] = useState(false)
  //   const [roleList, setRoleList] = useState<Role.RoleItem[]>([])
  //   const [userList, setUserList] = useState<User.UserItem[]>([])

  //   useEffect(() => {
  //     getAllUserList()
  //   }, [])
  //   const getRoleList = async () => {
  //     const data = await api.getRoleList(form.getFieldsValue())
  //     setRoleList(data)
  //   }
  //   const getAllUserList = async () => {
  //     const data = await api.getAllUserList()
  //     setUserList(data)
  //   }
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  //打开弹框
  const open = (type: IAction, data?: Role.EditParams | { parentId: string }) => {
    // getRoleList()
    setAction(type)
    setVisible(true)
    console.log('createRole:', data)

    if (data) {
      form.setFieldsValue(data)
    }
  }
  //部门提交
  const handleSubmit = async () => {
    const valid = await form.validateFields()
    if (valid) {
      if (action === 'create') {
        await api.createRole(form.getFieldsValue())
      } else {
        await api.editRole(form.getFieldsValue())
      }
      message.success('操作成功')
      handleCancel()
      props.update()
    }
  }
  const handleCancel = () => {
    setVisible(false)
    form.resetFields()
  }
  return (
    <Modal
      title={action === 'create' ? '创建角色' : '编辑角色'}
      okText='确定'
      cancelText='取消'
      width={800}
      open={visible}
      onOk={handleSubmit}
      onCancel={handleCancel}
    >
      <Form form={form} labelCol={{ span: 4 }} labelAlign='right'>
        <Form.Item hidden name='_id'>
          <Input></Input>
        </Form.Item>
        <Form.Item label='角色名称' name='roleName' rules={[{ required: true, message: '请输入角色名称' }]}>
          {/* <TreeSelect
            placeholder='请选择角色'
            allowClear
            treeDefaultExpandAll
            fieldNames={{ label: 'roleName', value: '_id' }}
            treeData={roleList}
          /> */}
          <Input placeholder='请输入角色名称' />
        </Form.Item>
        <Form.Item label='备注' name='remark'>
          <Input placeholder='请输入备注' />
        </Form.Item>
      </Form>
    </Modal>
  )
}
